<div ng-controller="AppCtrl" ng-cloak>
  <md-content class="md-padding">
    <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
      <md-nav-item md-nav-click="goto('page1')" name="page1">Page One</md-nav-item>
      <md-nav-item md-nav-click="goto('page2')" name="page2">Page Two</md-nav-item>
      <md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
      <!-- these require actual routing with ui-router or ng-route, so they won't work in the demo
      <md-nav-item md-nav-sref="app.page4" name="page4">Page Four</md-nav-item>
      <md-nav-item md-nav-href="#page5" name="page5">Page Five</md-nav-item>
      -->
    </md-nav-bar>
    <div class="ext-content">
      External content for `<span>{{currentNavItem}}</span>`
    </div>
  </md-content>
